<template>
  <div class="bottom-pagination">
    <div v-if="totalSelect" class="total-select">当前已勾选<span class="number">{{ totalSelect }}</span>条数据</div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizes"
      :total="total"
      :page-size="pageSize"
      :current-page="pageIndex"
      :layout="layout">
    </el-pagination>
  </div>
<!--</div>-->
</template>

<script>
export default {
  name: 'Pagination',
  // 通过props来接受从父组件传递过来的值
  props: {
    // 当前勾选总数
    totalSelect: {
      type: Number,
      default: 0
    },
    // 总记录数
    total: {
      type: Number,
      default: 0
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 当前页码
    pageIndex: {
      type: Number,
      default: 1
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 50, 100, 500];
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data () {
    return {
      index: this.currentPage, // 当前页码
      limit: this.pageSize, // 每页显示条数
      size: this.total || 1 // 总记录数
    };
  },
  watch: {
    pageIndex (val) {
      this.index = val || 1;
    },
    pageSize (val) {
      this.limit = val || 10;
    },
    total (val) {
      this.size = val || 1;
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.$emit('change', [2, this.size]);
    },
    handleCurrentChange (val) {
      console.log(`当前 ${val} 页`);
      this.index = val;
      this.$emit('change', [1, this.index]);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-pagination {
  // float: right;
  padding: 10px 0 0 0;
  text-align: right;
  &.bottom-pagination {
    .total-select {
      display: inline-block;
      padding: 2px 5px;
      height: 28px;
      line-height: 28px;
      vertical-align: top;
      color: #999;
      font-size: 13px;
      .number {
        margin: 0 5px;
        // color: $color-red;
      }
    }
    .el-pagination {
      display: inline-block;
    }
  }
  .el-input {
    .el-input__inner {
      border-radius: 2px;
      // &:hover {
      //   border-color: $active-color;
      // }
    }
  }
  .el-pagination__total {
    color: #333;
  }
  .el-pagination__sizes {
    line-height: 0;
    color: #333;
    .el-select {
      .el-input {
        margin: 0;
      }
    }
  }
  .btn-prev,
  .btn-next,
  button {
    border: solid 1px #ccc;
    &:disabled {
      border-color: #ebeef5;
      background: #fff;
    }
  }
  .el-pager li {
    line-height: 26px;
    border: solid 1px #ccc;
    background: none;
    // &.active {
    //   border-color: $active-color;
    //   color: $active-color;
    // }
  }
  .el-pagination__jump {
    margin-left: 10px;
    color: #333;
  }
}
</style>